<template>
	<view class="container goods-detail">
		<!-- 商品大图 -->
		<view class="banner-img">
			<image class="img" :src="goodsInfo.imageUrl" @click="previewImage" />
		</view>

		<!-- 商品的基本信息 -->
		<view class="content">
			<view class="price">
				<view class="price-num">¥{{ goodsInfo.price }}</view>
				<view class="price-origin-num">¥{{ goodsInfo.marketPrice }}</view>
			</view>
			<view class="title">{{ goodsInfo.name }}</view>
			<view class="desc">{{ goodsInfo.floralLanguage }}</view>
		</view>

		<!-- 商品的详细信息 -->
		<view class="detail">
			<image v-for="(item,index) in goodsInfo.detailList" :key="index" class="img" mode="widthFix" :src="item" />
		</view>

		<view class="safe" style="height: 120rpx;">
			<!-- 底部安全区 -->
		</view>

		<!-- 底部商品导航 -->
		<view class="goods-action">
			<navigator class="home" url="/pages/index/index" open-type="switchTab">
				<uni-icons type="home" size="25"></uni-icons>
				首页
			</navigator>
			<navigator class="cart" url="/pages/cart/cart" open-type="switchTab">
				<uni-badge size='small' :text="allCount" absolute="rightTop">
					<uni-icons type="cart" size="25"></uni-icons>
				</uni-badge>
				购物车
			</navigator>
			<navigator class="chat" url="">
				<uni-icons type="chat" size="25"></uni-icons>
				客服
			</navigator>
			<button open-type="contact"
				style="position: absolute;width: 13%;height: 100%;left:calc(26% + 56rpx);opacity: 0;">客</button>
			<view class="button-action">
				<view class="addCart" @click="addCart">
					加入购物车
				</view>
				<view class="buyNow" @click="buyGood">
					立刻购买
				</view>
			</view>
		</view>

		<!-- 弹框 -->
		<uni-popup ref="infoPopup" type="bottom" :safe-area="false">
			<view class="layout">
				<view class="goods-item">
					<!-- 需要购买的商品图片 -->
					<view class="mid">
						<image class="img" mode="widthFix" :src="goodsInfo.imageUrl" />
					</view>

					<!-- 商品基本信息 -->
					<view class="right">
						<view class="title">
							{{goodsInfo.name}}
						</view>
						<view class="buy">
							<view class="price">
								<view class="symbol">
									￥
								</view>
								<view class="num">
									{{goodsInfo.price}}
								</view>
							</view>
							<!-- 进步器组件 -->
							<view class="stepper" v-show="isStepper">
								<uni-number-box v-model="stepperValue" :min="1" :max="200"></uni-number-box>
							</view>
						</view>
					</view>
				</view>
				<!-- 祝福语输入框 -->
				<view class="time-wraper">
					<view class="title">祝福语</view>
					<textarea class="form-textarea" v-model="blessing"
						placeholder="必填，写上您的祝福语，给心爱的他（她）送上你的祝福（请勿填写特殊符号或表情符号）" />
				</view>
				<!-- 确定按钮 -->
				<view class="sheet-footer-btn">
					<button @click="handlerSubmit">确定</button>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script setup>
	import { reqGoodsInfo } from '@/api/goods.js'
	import { reqAddCart, reqCartList } from '@/api/cartReq.js'
	import { toast } from '../../../../../utils/extendApi';
	import useUserStore from '@/store/modules/user.js'

	let userStore = useUserStore()
	let goodsInfo = reactive({}) // 当前商品详情
	let infoPopup = ref() // 弹框
	let goodsId = ref() // 当前商品详情的id
	let allCount = ref(0) //商品购买数量
	let blessing = ref('') // 祝福语
	let stepperValue = ref(1) // 进步器组件的值（购买数量）
	let isStepper = ref(true) // 是否显示进步器组件（true 加入购物车 | false 立即购买）

	// 查看图片
	const previewImage = () => {
		uni.previewImage({
			urls: goodsInfo.detailList
		})
	}

	// 获取商品详情数据
	const getGoodsInfo = async () => {
		let result = await reqGoodsInfo(goodsId.value)
		Object.assign(goodsInfo, result.data)
	}

	// 购物车商品数量
	const getCartCount = async () => {
		// 若用户没登录，不执行后续逻辑
		if (!userStore.token) return

		let result = await reqCartList()

		// 判断购物车是否存在商品
		if (result.data.length != 0) {
			allCount.value = 0
			result.data.forEach(item => allCount.value += item.count)
		}
	}

	// 加入购物车弹框
	const addCart = () => {
		isStepper.value = true
		infoPopup.value.open()
	}

	// 立即购买
	const buyGood = () => {
		isStepper.value = false
		infoPopup.value.open()
	}

	// 弹窗的确定按钮触发的处理函数
	const handlerSubmit = async () => {
		// 是否进行了登录
		if (!userStore.token) {
			uni.navigateTo({
				url: "/pages/login/login"
			})
			return
		}

		// 加入购物车
		if (isStepper.value) {
			// 祝福语不为空
			if (!blessing.value.trim()) {
				toast({ title: '请输入祝福语' })
				return
			}

			let result = await reqAddCart({
				goodsId: goodsId.value,
				count: stepperValue.value,
				blessing: blessing.value
			})
			if (result.code == 200) {
				getCartCount()
				infoPopup.value.close()
				toast({ title: `此商品已加入 ${stepperValue.value} 个` })
			} else {
				toast({ title: `加入失败` })
			}
		} else { //  立即购买
			// 祝福语不为空
			if (!blessing.value.trim()) {
				toast({ title: '请输入祝福语' })
				return
			}

			uni.navigateTo({
				url: `/modules/orderPayModule/pages/order/detail/detail?goodsId=${goodsId.value}&blessing=${blessing.value}`
			})
		}

	}


	onLoad((options) => {
		goodsId.value = options.goodsId
		getGoodsInfo()
		getCartCount()
	})
</script>

<style lang="scss" scoped>
	/* pages/goods/detail/index.wxss */

	.container {
		padding: 0rpx !important;
	}

	.goods-detail {
		margin-bottom: 100px;
	}

	// 商品大图
	.banner-img {
		height: 800rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	// 商品的基本信息
	.content {
		margin: 0 16rpx;
		background: white;
		padding: 20rpx;
		position: relative;
		box-shadow: 0 0 8rpx rgba(0, 0, 0, 0.4);
		border-radius: 18rpx;
		top: -80px;
		height: 200rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		overflow: hidden;

		.price {
			display: flex;

			.price-num {
				font-size: 18px;
				color: #fa4126;
				font-weight: bold;
			}

			.price-origin-num {
				font-size: 12px;
				color: #b4babf;
				margin-left: 4px;
				text-decoration: line-through;
				margin-top: 6px;
			}
		}

		.title {
			font-size: 16px;
			font-weight: bold;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}

		.desc {
			font-size: 12px;
			color: #999999;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
	}

	// 详细图片
	.detail {
		margin: -130rpx 16rpx 100rpx;
		background: white;
		padding: 20rpx 16rpx;
		border-radius: 16rpx;

		.img {
			width: 100%;
		}
	}

	// 底部商品导航
	.goods-action {
		width: 100%;
		height: 100rpx;
		position: fixed;
		background-color: white;
		left: 0;
		bottom: 0;
		display: flex;

		&>navigator {
			width: 13%;
			height: 100%;
			display: flex;
			font-size: 26rpx;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			margin: 4rpx 15rpx;
		}

		.button-action {
			width: 61%;
			height: 100%;
			display: flex;
			color: white;
			justify-content: space-between;
			align-items: center;

			.addCart {
				width: 50%;
				height: 80%;
				display: flex;
				justify-content: center;
				align-items: center;
				background: linear-gradient(to right, #ffeb3b, #ff9800);
				border-radius: 99rpx 0 0 99rpx;
			}

			.buyNow {
				width: 50%;
				height: 80%;
				display: flex;
				justify-content: center;
				align-items: center;
				background: linear-gradient(to left, #ff3810, #ee0a24);
				border-radius: 0 99rpx 99rpx 0;
				margin-right: 5rpx;
			}
		}
	}

	// 弹框
	uni-popup {

		.layout {
			background-color: white;
			width: 100%;
			height: 66vh;
			border-radius: 50rpx 50rpx 0 0;
			padding: 20rpx;
			overflow: hidden;

			.goods-item {
				display: flex;
				align-items: center;
				padding: 0 32rpx 40rpx 0;

				.mid {
					width: 350rpx;


					.img {
						width: 100%;
					}
				}

				.right {
					height: 250rpx;
					width: 100%;
					margin-left: 16rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-between;

					.title {
						flex: 1;
						flex-shrink: 0;
						font-size: 28rpx;
						color: #333;
						line-height: 40rpx;
						font-weight: 400;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						overflow: hidden;
						word-break: break-word;
					}

					.buy {
						display: flex;
						justify-content: space-between;

						.price {
							display: flex;
							/* align-items: flex-end; */
							color: #fa4126;
							font-size: 36rpx;

							.symbol {
								font-size: 10px;
								margin-right: 2px;
								margin-top: 8px;
							}

							.num {}
						}
					}
				}
			}

			.time-wraper {
				margin-bottom: 12px;

				.title {
					justify-content: space-between;
					font-size: 14px;
					color: #333333;
				}

				.form-textarea {
					border-radius: 12px;
					background-color: #f7f8fa;
					padding: 16px 12px;
					font-size: 13px;
					margin-top: 12px;
					width: 94%;
					height: 84px;
				}
			}

			.sheet-footer-btn {

				button {
					color: white;
					background-color: #ee0a24;
					border: none;
				}
			}
		}

	}
</style>